<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/product/znd_banner.png')] bg-cover bg-no-repeat"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">筑能达·智慧能源管控</h1>
        <p class="banner-text xl:w-[39vw] mt-10">
          围绕绿色建筑综合能源管控，使用国际化的 OT 平台与基础设施、EER 相适应的数字化能源管理工具来助力企业数据化管理能源;提供 Saas 软件、物联网硬件、专家、数据分析、能源优化策略、专业实施团队服务，使能源利用更高效更安全，加速碳中和。
        </p>
      </div>
    </div>

    <div class="pt-[88px] pb-20">
      <div class="module-con">
        <h2 class="module-title">平台及产品</h2>
        <div class="flex flex-wrap mt-10 justify-center md:space-x-4">
          <div
            v-for="(item, ind) in traitList"
            :key="item.name"
            class="w-[227px] h-[368px] bg-white mb-6 px-4 pt-12 relative text-center rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
          >
            <img
              class="inline-block"
              :src="require(`../../assets/images/product/znd_0${ind + 1}.png`)"
            />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
            <p class="mt-[18px] text-center text-[#828282] text-sm xl:leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pt-[60px] pb-18 bg-[url('~/assets/images/product/znd_intro_banner.png')] bg-image-base"
    >
      <div class="module-con">
        <h2
          class="hidden md:block md:text-6xl bg-gradient-to-b from-[#EBF6FF] to-[#F8FCFF] uppercase bg-clip-text text-fill-color"
        >
          Labor service learning platform
        </h2>
        <h3
          class="text-[#1393FF] !leading-[18px] w-fit font-extrabold md:text-2xl border-b-2 border-[#FF9A19]"
        >
        数据大屏与报表
        </h3>
        <div class="mt-10 text-center">
          <img
            alt="筑能达·建筑工地能耗监测管理平台"
            class="w-[40vw] inline-block"
            src="../../assets/images/product/znd_pc.png"
          />
        </div>
        <h3
          class="text-[#1393FF] !leading-[18px] w-fit font-extrabold md:text-2xl border-b-2 border-[#FF9A19]"
        >
        小程序
        </h3>
        <div class="mt-10 text-center">
          <img
            class="w-[40vw] inline-block"
            src="../../assets/images/product/znd_scene.png"
          />
        </div>
      </div>
    </div>

    <div class="pt-[88px] pb-20">
      <div class="module-con">
        <h2 class="module-title">物联网硬件</h2>
        <div class="flex flex-wrap mt-10 justify-center md:space-x-4">
          <div
            v-for="(item, ind) in valueList"
            :key="ind"
            class="w-[285px] h-[300px] bg-white mb-6 px-4 pt-12 relative text-center rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
          >
            <img
              class="inline-block"
              :src="require(`../../assets/images/product/znd_value_0${ind + 1}.png`)"
            />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
            <p class="mt-[18px] text-center text-[#828282] text-sm xl:leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '小程序控制端',
          content: '设备查看与控制',
        },
        {
          name: '智慧能源管控平台',
          content:
            '监测、报表、分析',
        },
        {
          name: '全面数据采集',
          content:
            '环境监测、用能监测、用电监测、安全监测等数据采集',
        },
        {
          name: '大数据报表',
          content:
            '报表、大屏、分析',
        },
        {
          name: 'EloT物联网平台',
          content:
            '设备联网、设备 OTA、固件管理、产品开发与调试、运维监控、边缘网关、能源路由器',
        },
      ],
      valueList: [
        {
          name: '边缘网关',
          content: '设备接入、数据采集、设备监控',
        },
        {
          name: '智能门锁',
          content: '精准识别、一握即开、虚位密保',
        },
        {
          name: 'DTU',
          content: '安装便利、稳定性高、OTA 升级、Wi-SUN 无线通讯',
        },
        {
          name: '智能断路器',
          content: '安全、智能、防护、节能',
        },
      ],
    }
  },
  head: {
    title: '筑能达 · 建筑工地能耗监测管理平台-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '筑能达 · 建筑工地能耗监测管理平台',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '筑能达·建筑工地能耗监测管理平台，是跨设备、跨平台的多维一体应用，主要由大数据监控大屏、智能计量仪器仪表、现场实时能耗监测管理系统、移动能耗监测小程序/app等构成，帮助建筑工地实时掌握水、电、气等用能情况，灵活配置资源，实现绿色节能建造。',
      },
    ],
  },
}
</script>

<style scoped></style>
